﻿@{
    ViewBag.MainMenu = "Portal";
    ViewBag.LeftMenu = "CustomForm";

    ViewBag.Title = "自定义表单";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link rel="stylesheet" type="text/css" href="/Scripts/wangEditor/css/wangEditor.min.css">
<script type="text/javascript" src='/Scripts/wangEditor/js/wangEditor.min.js'></script>

<style>
    .wangEditor-container .wangEditor-txt p,
    .wangEditor-container .wangEditor-txt h1,
    .wangEditor-container .wangEditor-txt h2,
    .wangEditor-container .wangEditor-txt h3,
    .wangEditor-container .wangEditor-txt h4,
    .wangEditor-container .wangEditor-txt h5 {
        margin: 0px 0;
        line-height: 1.8;
    }
</style>

<script language="javascript">

    var _formId = getQueryString("id");

    var _editorIntroduction;
    var _editorSuccessfulDescription;

    var _mode = "create";//modify
    var _validator;

    var _data;

    $(document).ready(function () {
        //_editorIntroduction = $('#txtIntroduction').wangEditor({
        //    'menuConfig': [
        //     ['viewSourceCode'],
        //        ['bold', 'underline', 'italic', 'foreColor', 'backgroundColor', 'strikethrough'],
        //        ['blockquote', 'fontFamily', 'fontSize', 'setHead', 'list', 'justify'],
        //        ['createLink', 'unLink', 'insertTable'],
        //        ['insertLocation'],
        //        ['undo', 'redo', 'fullScreen']
        //    ]
        //});
        _editorIntroduction = new wangEditor('divIntroductionEditor');
        _editorIntroduction.config.menus = [
        'source',
        '|', 'bold', 'underline', 'italic', 'strikethrough', 'eraser', 'forecolor', 'bgcolor',
        '|', 'quote', 'fontfamily', 'fontsize', 'head', 'unorderlist', 'orderlist', 'alignleft', 'aligncenter', 'alignright',
        '|', 'link', 'unlink', 'table',
        '|', 'undo', 'redo', 'fullscreen'
        ];
        _editorIntroduction.create();

        //_editorSuccessfulDescription = $('#txtSuccessfulDescription').wangEditor({
        //    'menuConfig': [
        //     ['viewSourceCode'],
        //        ['bold', 'underline', 'italic', 'foreColor', 'backgroundColor', 'strikethrough'],
        //        ['blockquote', 'fontFamily', 'fontSize', 'setHead', 'list', 'justify'],
        //        ['createLink', 'unLink', 'insertTable'],
        //        ['insertLocation'],
        //        ['undo', 'redo', 'fullScreen']
        //    ]
        //});
        _editorSuccessfulDescription = new wangEditor('divSuccessfulDescriptionEditor');
        _editorSuccessfulDescription.config.menus = [
        'source',
        '|', 'bold', 'underline', 'italic', 'strikethrough', 'eraser', 'forecolor', 'bgcolor',
        '|', 'quote', 'fontfamily', 'fontsize', 'head', 'unorderlist', 'orderlist', 'alignleft', 'aligncenter', 'alignright',
        '|', 'link', 'unlink', 'table',
        '|', 'undo', 'redo', 'fullscreen'
        ];
        _editorSuccessfulDescription.create();

        _validator = $("#form").validate({
            onfocusout: false,
            onkeyup: false,
            showErrors: showValidationErrors,
            rules: {
                "txtName": "required"
            },
            messages: {
                "txtName": "请输入名称；"
            }
        });

        loadData();
    });

    function loadData() {
        var id = getQueryString("id");
        if (id == undefined || id == "") {
            return;
        }

        _mode = "modify";
        $("#btnRemove").show();

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/CustomForm/GetCustomForm?id=" + id,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    _data = data.Data;

                    $("#txtId").val(_data.Id);
                    $("#txtName").val(_data.Name);
                    _editorIntroduction.$txt.html(_data.Introduction)
                    _editorSuccessfulDescription.$txt.html(_data.SuccessfulDescription);
                    $("#txtShareImageUrl").val(_data.ShareImageUrl);
                    $("#txtShareTimelineTitle").val(_data.ShareTimelineTitle);
                    $("#txtShareAppMessageTitle").val(_data.ShareAppMessageTitle);
                    $("#txtShareAppMessageDescription").val(_data.ShareAppMessageDescription);
                    $("#txtImageUrl").val(_data.ImageUrl);
                    $("#selectOnlyMember").find("option[value='" + _data.OnlyMember + "']").attr("selected", true);
                    $("#txtGuideSubscribeUrl").val(_data.GuideSubscribeUrl);
                    $("#txtRemark").val(_data.Remark);

                    if (_data.FieldName) {
                        $("#checkboxFieldName").attr("checked", "checked");
                    }
                    if (_data.FieldNameRequired) {
                        $("#checkboxFieldNameRequired").attr("checked", "checked");
                    }

                    if (_data.FieldBirthday) {
                        $("#checkboxFieldBirthday").attr("checked", "checked");
                    }
                    if (_data.FieldBirthdayRequired) {
                        $("#checkboxFieldBirthdayRequired").attr("checked", "checked");
                    }

                    if (_data.FieldMobilePhone) {
                        $("#checkboxFieldMobilePhone").attr("checked", "checked");
                    }
                    if (_data.FieldMobilePhoneRequired) {
                        $("#checkboxFieldMobilePhoneRequired").attr("checked", "checked");
                    }

                    if (_data.FieldEmail) {
                        $("#checkboxFieldEmail").attr("checked", "checked");
                    }
                    if (_data.FieldEmailRequired) {
                        $("#checkboxFieldEmailRequired").attr("checked", "checked");
                    }

                    loadShareImage();
                    loadImage();

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function uploadShareImage() {
        __showFileUpload(getUploadShareImageResult);
    }

    function getUploadShareImageResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;
        $("#txtShareImageUrl").val(url);
        loadShareImage();
    }

    function loadShareImage() {
        $("#shareImage").attr("src", $("#txtShareImageUrl").val());
    }

    function removeShareImage() {
        $("#txtShareImageUrl").val("");
        loadShareImage();
    }

    function uploadImage() {
        __showFileUpload(getUploadImageResult);
    }

    function getUploadImageResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;
        $("#txtImageUrl").val(url);
        loadImage();
    }

    function loadImage() {
        $("#image").attr("src", $("#txtImageUrl").val());
    }

    function removeImage() {
        $("#txtImageUrl").val("");
        loadImage();
    }

    function save() {
        if (_validator.form() == false) {
            return;
        }

        if (_data == undefined || _data == null) {
            _data = new Object();
        }

        _data.Name = $("#txtName").val();
        _data.Introduction = _editorIntroduction.$txt.html();
        _data.SuccessfulDescription = _editorSuccessfulDescription.$txt.html();
        _data.ShareImageUrl = $("#txtShareImageUrl").val();
        _data.ShareTimelineTitle = $("#txtShareTimelineTitle").val();
        _data.ShareAppMessageTitle = $("#txtShareAppMessageTitle").val();
        _data.ShareAppMessageDescription = $("#txtShareAppMessageDescription").val();
        _data.ImageUrl = $("#txtImageUrl").val();
        _data.OnlyMember = $("#selectOnlyMember").val();
        _data.GuideSubscribeUrl = $("#txtGuideSubscribeUrl").val();
        _data.Remark = $("#txtRemark").val();

        _data.FieldName = $("#checkboxFieldName").is(":checked");
        _data.FieldNameRequired = $("#checkboxFieldNameRequired").is(":checked");

        _data.FieldBirthday = $("#checkboxFieldBirthday").is(":checked");
        _data.FieldBirthdayRequired = $("#checkboxFieldBirthdayRequired").is(":checked");

        _data.FieldMobilePhone = $("#checkboxFieldMobilePhone").is(":checked");
        _data.FieldMobilePhoneRequired = $("#checkboxFieldMobilePhoneRequired").is(":checked");

        _data.FieldEmail = $("#checkboxFieldEmail").is(":checked");
        _data.FieldEmailRequired = $("#checkboxFieldEmailRequired").is(":checked");

        var url = "/Api/CustomForm/CreateCustomForm";

        if (_mode == "modify") {
            _data.Id = $("#txtId").val();
            url = "/Api/CustomForm/UpdateCustomForm";
        }

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: JSON.stringify(_data),
            success: function (data, status, jqXHR) {
                if (data.Success) {
                    window.location.href = "/Portal/CustomFormContent?formId=" + _formId;

                } else {
                    layer.close(loadLayerIndex);
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function cancel() {
        if (_mode == "create") {
            window.location.href = "/Portal/CustomForm";
        } else {
            window.location.href = "/Portal/CustomFormContent?formId=" + _formId;
        }
    }

</script>



<div style=" margin-top:25px; margin-left:10px;" class="font_black_24">
    添加表单
</div>

<div class="divDotLine" style="margin-top:15px;"></div>

<div style="margin-top:25px;">
    <form id="form">
        <input type="hidden" id="txtId" />
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="140" height="36">名称：</td>
                <td><input id="txtName" name="txtName" type="text" class="input_16" style="width:96%; " /></td>
            </tr>
            <tr>
                <td height="36">说明：</td>
                <td>
                    <div style="width:96%">
                        <div id="divIntroductionEditor" style='height:200px; '></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width:96%;margin-bottom:10px;">
                        说明内容将显示在页面上。
                    </div>
                </td>
            </tr>
            <tr>
                <td height="36">提交成功后提示：</td>
                <td>
                    <div style="width:96%">
                        <div id="divSuccessfulDescriptionEditor" style='height:200px; '></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width:96%;margin-bottom:10px;">
                        提交成功后，显示此内容。
                    </div>
                </td>
            </tr>
            <tr>
                <td height="110" valign="top">

                    <div style="margin-top: 5px;">
                        分享小图片：
                    </div>
                </td>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="110">
                                <img id="shareImage" src="" alt="" width="100" height="100" />
                            </td>
                            <td>
                                <a href="javascript:void(0)" onclick="uploadShareImage()">上传新图片</a><br />
                                <a href="javascript:void(0)" onclick="removeShareImage()">删除图片</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td height="36">&nbsp;</td>
                <td>
                    <input id="txtShareImageUrl" name="txtShareImageUrl" type="text" class="input_16" style="width: 96%;" maxlength="500" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td valign="top">
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        在微信中分享活动时，使用的正方形小图片。
                    </div>
                </td>
            </tr>
            <tr>
                <td width="140" height="36">分享到朋友圈标题：</td>
                <td>
                    <input id="txtShareTimelineTitle" name="txtShareTimelineTitle" type="text" class="input_16" style="width: 96%;" maxlength="50" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        将活动页面分享到朋友圈时显示的标题文字。
                    </div>
                </td>
            </tr>
            <tr>
                <td width="140" height="36">分享给好友标题：</td>
                <td>
                    <input id="txtShareAppMessageTitle" name="txtShareAppMessageTitle" type="text" class="input_16" style="width: 96%;" maxlength="50" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        将活动页面分享给好友时显示的标题文字。
                    </div>
                </td>
            </tr>
            <tr>
                <td width="140" height="36">分享给好友描述：</td>
                <td>
                    <input id="txtShareAppMessageDescription" name="txtShareAppMessageDescription" type="text" class="input_16" style="width: 96%;" maxlength="100" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        将活动页面分享给好友时显示的标题下方的一段描述文字。
                    </div>
                </td>
            </tr>
            <tr>
                <td height="110" valign="top">

                    <div style="margin-top:5px;">
                        图片：
                    </div>
                </td>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="250"><img id="image" src="" alt="" width="240" height="100" /></td>
                            <td>
                                <a href="javascript:void(0)" onclick="uploadImage()">上传新图片</a><br />
                                <a href="javascript:void(0)" onclick="removeImage()">删除图片</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td height="36">&nbsp;</td>
                <td><input id="txtImageUrl" name="txtImageUrl" type="text" class="input_16" style="width:96%; " /></td>
            </tr>
            <tr>
                <td></td>
                <td valign="top">
                    <div class="font_gray_13" style="width:96%;margin-bottom:10px;">
                        主题图片。
                    </div>
                </td>
            </tr>
            <tr>
                <td height="36">仅关注者可填写：</td>
                <td>
                    <select id="selectOnlyMember" name="selectOnlyMember" class="input_16" style="width:130px;">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width:96%;margin-bottom:10px;">
                        当仅关注者才可参与时，未关注公众号者将被引导到“引导关注页面”。
                    </div>
                </td>
            </tr>
            <tr>
                <td width="140" height="36">引导关注页面：</td>
                <td><input id="txtGuideSubscribeUrl" name="txtGuideSubscribeUrl" type="text" class="input_16" style="width:96%; " /></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width:96%;margin-bottom:10px;">
                        如果留空，将以全局设置为准，也可以在此指定一个针对本活动的特殊引导关注页面。
                    </div>
                </td>
            </tr>
            <tr>
                <td width="140" height="36">备注：</td>
                <td><input id="txtRemark" name="txtRemark" type="text" class="input_16" style="width:96%; " /></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width:96%;margin-bottom:10px;">
                        内部备注，关注者不可见。
                    </div>
                </td>
            </tr>
            <tr>
                <td  height="36" valign="top">填写字段：</td>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="100" height="30">
                                <input type="checkbox" id="checkboxFieldName" />
                                <label for="checkboxFieldName">姓名</label>
                            </td>
                            <td width="150">
                                <input type="checkbox" id="checkboxFieldNameRequired" />
                                <label for="checkboxFieldNameRequired">必填</label>
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30">
                                <input type="checkbox" id="checkboxFieldBirthday" />
                                <label for="checkboxFieldBirthday">生日</label>
                            </td>
                            <td>
                                <input type="checkbox" id="checkboxFieldBirthdayRequired" />
                                <label for="checkboxFieldBirthdayRequired">必填</label>
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30">
                                <input type="checkbox" id="checkboxFieldMobilePhone" />
                                <label for="checkboxFieldMobilePhone">手机</label>
                            </td>
                            <td>
                                <input type="checkbox" id="checkboxFieldMobilePhoneRequired" />
                                <label for="checkboxFieldMobilePhoneRequired">必填</label>
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30">
                                <input type="checkbox" id="checkboxFieldEmail" />
                                <label for="checkboxFieldEmail">邮箱</label>
                            </td>
                            <td>
                                <input type="checkbox" id="checkboxFieldEmailRequired" />
                                <label for="checkboxFieldEmailRequired">必填</label>
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>


                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width:96%;margin-bottom:10px;">
                        表单中粉丝需要填写的内容。
                    </div>
                </td>
            </tr>
        </table>
    </form>
</div>



<div style="margin-top:25px;">
    <div style="float:right;">
        <input name="btnRemove" type="button" class="btn_red" id="btnRemove" value="删 除" style="display:none" onclick="removeData()" />
    </div>
    <div style="float:left">
        <input name="btnSave" type="button" class="btn_blue" id="btnSave" value="保 存" onclick="save()" />
        <input name="btnCancel" type="button" class="btn_blue" id="btnCancel" value="取 消" onclick="cancel()" />
    </div>
    <div style="clear:both"></div>
</div>

@Helpers.FileUpload()